<link rel="stylesheet" type="text/css" href="${mvcPath}/dacp-res/js/mxGraphEditor/styles/grapheditor.css">
<link rel="stylesheet" type="text/css" href="${mvcPath}/dacp-view/datastash/workshop/unit_creator/css/layout.css">
<#include "step_editor.ftl" parse=true/></div>
<script type="text/x-template" id="layout-template">
    <div class="elx-layout">
        <div class="elx-tab-frame">
		    <elx-tabs ref="tab" type="border-card" v-model="tabActiveIndex" closable @tab-remove="removeTab">
			    <div class="title" slot="title" @click="handlerBackMain">
			        <span v-html="title"></span>
			    </div>
			    <el-tab-pane v-show="tabActiveIndex!='nothing'&&tabActiveIndex == item.name" v-for="(item, index) in tabData" :key="item.name" :label="item.stepLabel" :name="item.name">
			        <step-editor :step="item" @back-main="handlerBackMain" @save="handlerSave"></step-editor>
			    </el-tab-pane>
			    <div id="graphEditorContainer">
			        <div id="graphEditor"></div>
					<div class="elx-sidebar-operate" :class="inspectorExpand?'expand':''" @click="expandInspector">
					    <div class="elx-sidebar-operate-back"></div>
						<span class="uex-icon-d-arrow-left"></span>
					</div>
					<input type="file" id="files" style="display:none" @change="importData();"/>
				</div>
			</elx-tabs>
	    </div>
    </div>
</script>
<#include "graph_href.ftl" parse=true/></div>
<script>
    Vue.component('layout', {
        template: '#layout-template',
        store: store,
        data:function() {
            return{
            	title: '首页',
                tabActiveIndex: 'nothing',
                tabData: [],
                dialogFormVisible: false,
                operateShow: true,
                inspectorExpand: false
            }
        },
        methods: {
        	handlerBackMain: function() {
                this.tabActiveIndex = 'nothing';
                editorUi.refresh();
            },
            removeTab: function(name) {
                var _self = this;
                var _filterTabData = [];
                _.map(this.tabData, function(tab) {
                  if (tab.name === name) {
                    var _index = _self.tabData.indexOf(tab);
                    var _nextTab = _self.tabData[_index + 1] || _self.tabData[_index - 1];
                    _self.tabActiveIndex = _nextTab ? _nextTab.name : null;
                  }else{
                      _filterTabData.push(tab)
                  }
                });
                this.tabData = _filterTabData;
                this.handlerBackMain();
            },
            openTab: function(data) {
                var _self = this;
                var _filterTabData = [];
                this.tabActiveIndex = this.tabData>0?this.tabData[this.tabData.length-1].name:this.tabActiveIndex;
                this.$nextTick(function(){
                    _.map(_self.tabData, function(tab) {
                        if(tab.name === data.name){
                            _filterTabData.push(tab);
                        }
                    });
                    if (_filterTabData.length === 0) {
                        _self.tabData.push(data);
                        _self.$nextTick(function() {
                            _self.tabActiveIndex = data.name;
                        });
                    } else {
                        _self.tabActiveIndex = _filterTabData[0].name;
                    }
                })
            },
            expandInspector: function() {
                this.inspectorExpand = !this.inspectorExpand;
                this.expandSidebar();
            },
            expandSidebar: function() {
                if (this.inspectorExpand) {
                    $('.geSidebarContainer.formatContainer').width('240px');
                    $('.geDiagramContainer.geDiagramBackdrop').css('right', '240px');
                } else {
                    $('.geSidebarContainer.formatContainer').width('0px');
                    $('.geDiagramContainer.geDiagramBackdrop').css('right', '0px');
                }
                setTimeout(function() {
                    editorUi.refresh();
                },100)
            },
            importData: function() {
                var selectedFile = document.getElementById("files").files[0];
                var name = selectedFile.name;
                var size = selectedFile.size;
                var reader = new FileReader();
                reader.readAsText(selectedFile);
                reader.onload = function() {
                    var doc = mxUtils.parseXml(this.result);
                    var codec = new mxCodec(doc);
                    codec.decode(doc.documentElement, editorUi.editor.graph.getModel());
                };
            },
            handlerSave: function(item) {
            	var cell = editorUi.editor.graph.view.states.map[item.name].cell;
                this.dialogFormVisible = false;
                
                if (item.modelData.stepLabel) {
                	var stepLabel = item.modelData.stepLabel || '';
                    
                    var doc = mxUtils.createXmlDocument();
                    var obj = doc.createElement('object');
                    
                    obj.setAttribute('label', stepLabel);
                    cell.setAttribute('value', obj);
                    
                    item.stepLabel = stepLabel;
                    editorUi.editor.graph.getModel().setValue(cell, obj);
                }
                
                cell.modelData = JSON.stringify(_.extend({}, item.modelData));
                
                this.tabActiveIndex = "nothing";
            }
        },
        watch: {
        	tabData: function(val, oldVal) {
                this.tabActiveIndex = val.length == 0 ? "nothing" : this.tabActiveIndex;
            }
        },
        created: function () {
        	initEditor(this, this.$store.state.unit.graph);
        	var _self = this;
        	
        	Graph.prototype.dblClick = function(evt, cell){
        		
        		if (this.isEnabled()&&cell){
        			var stepLabel = cell.getAttribute('label') || (typeof cell.value == 'string' ? cell.value : null);
        			stepLabel = stepLabel ? stepLabel : cell.mxObjectId;
        			if (!('modelData' in cell)) {
        		        cell.modelData = '{}';
        		    }
        			var defaultField = {"label": "节点名", "name": "stepLabel", "type": "inputText", "isShow": true, "defaultValue": ""};
        			var defaultRule =  {
      			        "stepLabel": [
      			            { "required": true, "message": "请输入节点名"}
      			        ]
      			    };
        			var defaultFormConfig = {"labelWidth": "80px","fields": [],"rules": {}};
        			
        			try {
        			    var formConfig =  _.extend(defaultFormConfig, stringToJson(window.stepDefine[cell.name].stepCfg));
        			    formConfig.fields.unshift(defaultField);
        			    formConfig.rules = _.extend(formConfig.rules, defaultRule);
        			} catch(error) {
        			    var formConfig = {
       			            "labelWidth": "80px",
       			            "fields": [defaultField],
       			            "rules": _.extend(defaultRule)
       			         };
        			}
        			var modelData =typeof cell.modelData == 'string' ? JSON.parse(cell.modelData) : cell.modelData;
        			modelData.stepLabel = stepLabel;
        			_self.openTab({
        	        	name: cell.mxObjectId, 
        	        	stepLabel: modelData.stepLabel ? modelData.stepLabel : stepLabel, 
        	        	formConfig: formConfig || {}, 
        	        	modelData: _.extend({}, modelData)
        	        });
        		}
        		mxGraph.prototype.dblClick.call(this, evt, cell);
        	};
        }
    })
</script>